<?php include 'header.php'; ?>

<p><img src="img/logo.gif"></p>
<p></p>
<div class="well"><form action="searchresults.php" method="get">
    <table class="table">
        <thead>
            <tr>
                <th>Destination:<br><input type="text" id="typeahead" name="destination" required></th>
                <th>Check in:<br><input type="text" class="span2" value="" name="indate" id="dpd1" required></th>
                <th>Check out:<br><input type="text" class="span2" value="" name="outdate" id="dpd2" required></th>
                <th><input class="btn btn-primary btn-large" type="submit" value="Search Rooms"></th>
            </tr>
        </thead>
    </table>
</form> 
</div>

<script>
    $(function() {
        $('#typeahead').typeahead({
            source: function(query, process) { 
                return $.getJSON(
                    'https://maps.googleapis.com/maps/api/place/autocomplete/json?sensor=false&key=AIzaSyBtF4Yu2q3Z0deaT3SUmXXuugbymzMSPCA',
                    {input: query},
                    function(data) {
                        var newData = [];
                        alert('test');
                        $.each(data.predictions, function() {
                            newData.push(this.description);
                        });
                        return process(newData);
                    });//end function
            }//end function(query, process
        });//typeahead
    });
</script>

<?php include 'footer.php'; ?> 